<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>千图网首页</title>
    <link rel="stylesheet" href="qiantu.css">
</head>

<body>
    <header>
        <div class="container nav">
            <div class="nav-left">
                <li class="nav-color"><a href="#">首页</a></li>
                <li><a href="#">所有分类</a> </li>
                <li><a href="#">设计新意</a></li>
                <li><a href="#">办公新意</a></li>
                <li><a href="#"><b>· · ·</b></a></li>
            </div>
            <div class="nav-right">
                <li><a href="#"><span class="icon-d"></span>VIP中心</a></li>
                <li><a href="#" class="bnt">请登录</a></li>
                <li><a href="#">请注册</a></li>
            </div>
        </div>
    </header>
    <section class="logo container">
        <div class="logo-left">
            <a href="#"><img src="img/1.png" alt=""></a>
        </div>
        <div class="logo-center">
            <div id="input">
                <div class="aa">全站</div>
                <input type="text" placeholder="800万免费素材任你选">
            </div>
            <div id="input-bottom">
                <li>热门搜索：</li>
                <li><a href="#">七夕</a></li>
                <li><a href="#">详情页</a></li>
                <li><a href="#">icon</a></li>
                <li><a href="#">主图</a></li>
                <li><a href="#">秋季</a></li>
                <li><a href="#">PPT模版</a></li>
                <li><a href="#">EXCEL模版</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">个人简历</a></li>
                <li><a href="#">装饰画</a></li>
            </div>

        </div>
        <div class="logo-right">
            <a href="#">搜索</a>
        </div>
    </section>
    <section class="container box">
        <div class="ding">
            <div class="cc">
                <span class="qq"></span>
                <ul>
                    <li class="tu"><a href="#"><img src="./img/banner01.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/banner02.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/banner03.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/banner04.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/banner05.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/banner06.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/banner07.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/banner08.jpg" alt=""></a></li>
                </ul>
                <div class="box-button">
                    <div class="bianse"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="box-anniu">
                <span class="prev"><a href="#">＜</a></span>
                <span class="next"><a href="#">＞</a></span>
            </div>
        </div>

    </section>
    <main class="container main">
        <div class="main-top">
            <h2><span class="main-icon"></span>精选题材</h2>
            <a href="#">100万党建题材、PPT汇报模版无限下载，每天仅需0.18元立享VIP特权</a>
        </div>
        <div class="main-bottom">
            <li class="main-one">
                <img src="./img/jxzt01.jpg" alt="">
                <div class="main-one1">
                    <hr>
                    <h2>和啤酒有关</h2>
                    <p>啤酒如何拯救世界</p>
                    <hr>
                </div>
            </li>
            <li class="main-two">
                <img src="./img/jxzt02.jpg" alt="">
                <div class="main-one1">
                    <hr>
                    <h2>爱的元素背景</h2>
                    <p>七夕到，让爱在土中发芽</p>
                    <hr>
                </div>
            </li>
            <li class="main-three">
                <img src="./img/jxzt03.jpg" alt="">
                <div class="main-one1">
                    <hr>
                    <h2>鲜花背景精选</h2>
                    <p>为你的设计锦上添花</p>
                    <hr>
                </div>

            </li>
            <li class="main-four">
                <img src="./img/jxzt04.jpg" alt="">
                <div class="main-one1">
                    <hr>
                    <h2>枫叶元素背景精选</h2>
                    <p>一叶而知秋</p>
                    <hr>
                </div>
            </li>
        </div>
        <div class="main-second">
            <h2><span class="main-icon1"></span>商用海报</h2>
            <li><a href="#">招聘海报</a></li>
            <li><a href="#">配图海报</a></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">促销海报</a></li>
            <li><a href="#">原创插画</a></li>
        </div>
        <div class="main-last">

            <li>
                <span class="icon-a"></span>
                <img src="./img/syhb01.jpg" alt="">
                <div class="main-second1">
                    <span class="icon-b"></span>
                    <span class="icon-c"></span>
                </div>
                <p><a href="#">超清新雪糕夏日凉爽海报</a></p>
            </li>
            <li>
                <span class="icon-a"></span>
                <img src="./img/syhb02.jpg" alt="">
                <div class="main-second1">
                    <span class="icon-b"></span>
                    <span class="icon-c"></span>
                </div>
                <p><a href="#">文艺夏日时光菠萝蓝色简约海报设计微信配图</a></p>
            </li>
            <li>
                <span class="icon-a"></span>
                <img src="./img/syhb03.jpg" alt="">
                <div class="main-second1">
                    <span class="icon-b"></span>
                    <span class="icon-c"></span>
                </div>
                <p><a href="#">七夕情人节扁平风创意简约商业海报设计模版</a></p>
            </li>
            <li>
                <span class="icon-a"></span>
                <img src="./img/syhb04.jpg" alt="">
                <div class="main-second1">
                    <span class="icon-b"></span>
                    <span class="icon-c"></span>
                </div>
                <p><a href="#">我的前半生文艺情感配图海报设计</a></p>
            </li>
        </div>
    </main>
    <footer class="container footer">
        <div class="footer-top">
            <ul>
                <h3>常见问题</h3>
                <li><a href="#">成为特邀设计师</a></li>
                <li><a href="#">成为原创贡献者</a></li>
                <li><a href="#">注册登录</a></li>
                <li><a href="#">账号/密码</a></li>
                <li><a href="#">充值/售后</a></li>
                <li><a href="#">版本投诉</a></li>
            </ul>
            <ul>
                <h3>关于千图网</h3>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">媒体报道</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">心系千图</a></li>
                <li><a href="#">每日最新</a></li>
            </ul>
            <ul>
                <h3>产品服务</h3>
                <li><a href="#">官方微博</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">千图导航</a></li>
            </ul>
            <ul>
                <h3>友情链接</h3>
                <li><a href="#">我图网</a></li>
                <li><a href="#">千库网</a></li>
                <li><a href="#">提图网</a></li>
                <li><a href="#">包图网</a></li>
                <li><a href="#">视达网</a></li>
                <li><a href="#">更多>></a></li>
            </ul>
            <ul>
                <h2>客服咨询</h2>
                <li class="footer-icon1">
                    <p><span class="icon-f"></span>400-998-7011 （9:00-18:00）</p>
                </li>
                <li class="footer-icon1"><span class="icon-g"></span><a href="#">sdjsdlk@.com</a></li>
                <li><button class="footer-icon1"><span class="icon-h"></span><a href="#">点我交谈</a></button></li>
            </ul>
        </div>
        <hr style="width:1200px;">
        <div class="footer-bottom">
            <div class="icon">
                <span class="icon-i"></span>
                <span class="icon-j"></span>
            </div>
            <div class="shouhou">
                <li><a href="#">注册声明</a></li>
                <li><a href="#">版权声明</a></li>
                <li><a href="#">售后服务</a></li>
            </div>
            <div class="beian">
                <p>Copyright ©2013-2017 千图网 沪ICP备10011451号-6 <span class="icon-r"></span>&#X3000;上海工商 安全实名验证 信用网站</p>
            </div>
        </div>

    </footer>
</body>
<script>
    window.onload = function () {
        var li3 = document.querySelectorAll('.nav li');
        var box = document.querySelector('.box');
        var cc = document.querySelector('.cc');
        var lis = document.querySelectorAll('.box li');
        var li1 = document.querySelectorAll('.main-bottom li');
        var li2 = document.querySelectorAll('.main-last li');
        var divs = document.querySelectorAll('.box-button div');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var span = document.querySelector('span');
        var one = document.querySelectorAll('.main-bottom .main-one1');
        var two = document.querySelectorAll('.main-last .main-second1');
        var span1 = document.querySelectorAll('.icon-b');
        // var span11 =document.querySelector('.icon-b1');
        var span2 = document.querySelectorAll('.icon-c');

        var timer = setInterval(bottomImg, 1000);;
        var color = ['black', '#ffff0f', '#fdf100', '#2d9aff', '#89dce3', '#fef8c3', '#110204', '#f4cad8']

        var index = 0;
        // 上一张
        function topImg() {
            index = index == 0 ? index = lis.length - 1 : index = index - 1;
            changeImg();
        }
        // 下一张
        function bottomImg() {
            index = index == lis.length - 1 ? 0 : index = index + 1;
            changeImg();
        }
        // setInterval(changeImg, 1000);
        // 自动轮播
        function changeImg() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
                divs[i].className = '';
            }
            lis[index].className = 'tu';
            divs[index].className = 'bianse';
            box.style.backgroundColor = color[index];

        }
        // 鼠标放上 图片停止转动
        cc.onmouseover = function () {
            clearInterval(timer);
            timer = null;

        }
        cc.onmouseout = function () {
            if (timer) return;
            timer = setInterval(bottomImg, 1000);
        }
        // 点击切换图片、颜色
        for (var i = 0; i < divs.length; i++) {
            divs[i].index = i;
            divs[i].onclick = function () {
                clearInterval(timer);
                timer = null;
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                    divs[j].className = '';
                }
                // console.log(this.index);
                lis[this.index].className = 'tu';
                divs[this.index].className = 'bianse';
                box.style.backgroundColor = color[this.index];
                // index = this.index;
                // changeImg()
            }
            divs[i].onmouseout = function () {
                if (timer) return;
                timer = setInterval(bottomImg, 1000);
            }
            // 按钮
            prev.onclick = function () {
                topImg();
            }
            next.onclick = function () {
                bottomImg();
            }
            // 鼠标移入、移出
            box.onmouseover = function () {
                prev.style.display = 'block';
                next.style.display = 'block';
            }
            box.onmouseout = function () {
                prev.style.display = 'none';
                next.style.display = 'none';
            }
        }
        for (var i = 0; i < li1.length; i++) {
            li1[i].index = i;
            li1[i].onmouseover = function () {
                one[this.index].style.display = 'block';
            }
            li1[i].onmouseout = function () {
                one[this.index].style.display = 'none';
            }
        }
        for (var i = 0; i < li2.length; i++) {
            li2[i].index = i;
            li2[i].onmouseover = function () {
                two[this.index].style.display = 'block';
            }
            li2[i].onmouseout = function () {
                two[this.index].style.display = 'none';
            }
        }
        // for(var i = 0;i<span1.length;i++){
        //     span1[i].index = i;
        //     span1[i].onmouseover = function(){
        //         span1[this.index].style.display = 'block';
        //     }
        // }
        for (var i = 0; i < li3.length; i++) {
            li3[i].index = i;
            li3[i].onmouseover = function () {
                for (var j = 0; j < li3.length; j++) {
                    li3[j].className = '';
                }
                li3[this.index].className = 'nav-color';
            }
        }
    }

</script>

</html>